<template>
<div>
  <h1>曼波你好</h1>
    
    <div class="wrap">
      <div class="nav_horizontal">
        <!-- 横向导航项 -->
        <div class="nav_item" v-for="(item) in arr" :key="item.id"> 
          <span 
            @click="selectNav(item.id)" 
            :class="{active: activeId === item.id}"
          >
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>


export default {
  data(){
    return{
       arr: [
          {id:1,name:'曼波1'},
          {id:2,name:'曼波2'},
          {id:3,name:'曼波3'},
          {id:4,name:'曼波4'},
          {id:5,name:'曼波5'}
        ],
        activeId: 1  // 当前选中的导航项ID
    }
  },
  methods: {
    // 点击导航项更新选中状态
    selectNav(id) {
      this.activeId = id;
    }
  }
}
</script>

  <style>
    .wrap {
      width: 100%;
      margin: 1rem 0;
    }

    /* 横向导航容器 */
    .nav_horizontal {
      display: flex; /* 关键：使用flex实现横向排列 */
      gap: 0.5rem; /* 导航项之间的间距 */
      overflow-x: auto; /* 当导航项过多时可横向滚动 */
      padding: 0.5rem;
      border-bottom: 1px solid #eee; /* 底部边框分隔 */
    }

    /* 隐藏横向滚动条（可选） */
    .nav_horizontal::-webkit-scrollbar {
      height: 4px;
    }
    .nav_horizontal::-webkit-scrollbar-thumb {
      background: transparent;
    }

    /* 导航项样式 */
    .nav_item {
      flex: 0 0 auto; /* 禁止项目收缩，保持原尺寸 */
    }

    .nav_item span {
      display: inline-block;
      padding: 0.6rem 1.2rem;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    /* 高亮样式 */
    .nav_item .active {
      border-bottom: 2px solid #7f4395;
      color: #7f4395;
      font-weight: 500;
    }
  </style>
